<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 搜索筛选 -->
            <el-card class="box-card">
                <el-row>
                    <el-col :span="19">
                        <el-button size="small" icon="el-icon-plus" type="primary" @click="currentHandler('add')">新建规则
                        </el-button>
                    </el-col>
                    <el-col :span="5">
                        <el-input size="small" v-model="ruleName" placeholder="规则名称" style="width: 200px;"></el-input>
                        <el-button size="small" type="primary" @click="search">查询</el-button>
                        <el-button size="small" type="primary" @click="reset">重置</el-button>
                    </el-col>
                </el-row>
            </el-card>
            <div class="interspaceH"></div>
            <!--列表-->
            <el-card class="box-card">
                <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                          element-loading-text="拼命加载中" style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="sopName" label="规则名称" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="300" align="center">
                    </el-table-column>
                    <el-table-column prop="creator" label="规则创建人" width="300" align="center">
                    </el-table-column>
                    <el-table-column label="关联群聊" width="300" align="center">
                        <template slot-scope="scope">
                            <el-tag :key="index" v-for="(item, index) in scope.row.groupList"
                                    :disable-transitions="false"
                                    v-if="item.clientGroupName != null && item.clientGroupName != ''"
                                    style="margin-right: 10px">
                                    {{ item.clientGroupName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sopStatus" label="开关" width="250" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.sopStatus" active-color="#13ce66"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="150">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editClientGroup('edit', scope.row)">添加群聊</el-button>
                            <!-- <el-button type="text" @click="statusClientGroup()">完成情况</el-button>-->
                            <!-- <el-button type="text" @click="handleEdit('edit', scope.row)">编辑</el-button>-->
                            <el-button type="text" @click="deleteHandle(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="interspaceH"></div>

                <!-- 分页 -->
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
            <!-- 规则添加群聊 -->
            <el-dialog title="添加群聊" :visible.sync="editClientGroupVisible" width="37%" @click="close">
                <div style="padding: 0px 0px 0px 30px;">
                    <MultipleSelect ref="selectMultipleMember" :listFields="listGroups" :dataSource="transferData"
                                    type="filter"/>
                    <div class="button-center" style="padding: 10px 10px;">
                        <el-button size="mini" type="primary" @click="editGroupHandle('addGroup')">确定</el-button>
                        <el-button size="mini" @click="close">取消</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>

        <!-- 新建sop规则 -->
        <div v-if="currentPanel == 'add'">
            <sopList @currentHandler="currentHandler"></sopList>
        </div>
    </div>
</template>

<script>
    const contentList = [
        {
            contentType: 1,
            content: '',
            imageUrl: '',
            linkContent: {
                linkAddress: '',
                linkTitle: '',
                content: ''
            }
        }
    ]
    import Pagination from '@/components/Pagination'
    import ManageDetail from '@/views/custGroup/manage/detail'
    import sopList from "@/views/custGroup/sop/sop"
    import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"
    import ElementUI from 'element-ui'

    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    export default {
        name: "sop_text",
        props: {
            contentList: {
                type: Array,
                default() {
                    return [...contentList];
                }
            },
            rowId: {
                type: Object,
                default() {
                }
            },
        },

        data() {
            return {
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                listGroups: {
                    clientGroupName: '群聊名称',
                },
                tabCurrent: 'first',
                transferData: [],
                groupData: [],
                value: [],
                dataSource: [],
                loading: false, // true显示加载
                ruleName: '', // 搜索框规则名称
                switchValue: true,

                formVisible: false, // 批量打标签页显示与隐藏

                addClientGroupVisible: false,

                editClientGroupVisible: false,

                statusFormVisible: false,

                // 编辑信息
                statusForm: {},

                radio: '1',
                radio1: '1',
                radio2: '1',

                listData: [],
                // 用户数据
                currentPanel: 'list',
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                options: [{
                    value: '',
                    label: ''
                }],
                sopForm: {},
                pushContentList: [],
            }
        },

        // 注册组件
        components: {
            Pagination,
            ManageDetail,
            MultipleSelect,
            sopList,
        },

        /**
         * 创建完毕
         */
        handleRemove(file) {
            this.$message.error("error")
        },
        addContent() {
            this.contentList.push({
                contentType: 1,
                content: '',
                imageUrl: '',
                linkContent: {
                    linkAddress: '',
                    linkTitle: '',
                    content: ''
                }
            })
        },
        getData() {
            return this.contentList;
        },

        mounted() {
            this.queryDataHandle()
            this.$request("/api/custGroup/selectGroup/1_0", "", "POST").then((data) => {
                this.transferData = [...data.rows]
            })
        },

        methods: {
            queryDataHandle(page = 1, row = 10) {
                let that = this
                let payload = {
                    sopType: 2,
                    pageNum: page,
                    pageSize: row
                }
                this.$request("/api/sop/selectAllSop/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },

            // 查询
            search() {
                let that = this
                let payload = {
                    sopType: 2,
                    pageNum: 1,
                    pageSize: 10,
                    sopName:this.ruleName
                }
                this.$request("/api/sop/selectAllSop/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            // 重置
            reset() {
                this.ruleName = '';
                this.search();
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.formInline)
            },
            // 显示批量打标签
            show() {
                this.formVisible = true
                this.title = '添加sop规则'
                this.type = 'add'
            },
            // 关闭批量打标签弹出框
            close() {
                this.formVisible = false
                this.editClientGroupVisible = false
            },

            // 话术编辑
            handleEdit(index, row) {
                this.formVisible = true
                this.title = '编辑sop规则'
                this.type = "edit"
                this.saveForm = {...row}
            },
            // 编辑规则添加群聊
            editClientGroup(message, row) {
                this.groupData = {...row}
                this.editClientGroupVisible = true;
            },
            currentHandler(data) {
                this.currentPanel = data;
                if (data == 'list') {
                    this.queryDataHandle(1, 10)
                }
            },
            statusClientGroup() {
                this.statusFormVisible = true;
            },
            rowChange(val) {
                this.multipleSelection = val;
            },
            handleClosr() {
                this.statusFormVisible = false
            },
            formatter() {
            },

            editGroupHandle(message) {
                let data = this.$refs.selectMultipleMember.getData();
                let clientGroupListId = this.groupData.relationId;
                for (let i = 0; i < data.length; i++) {
                    if (clientGroupListId.indexOf(data[i].clientGroupId) == -1) {
                        clientGroupListId += ',' + data[i].clientGroupId
                    }
                    let payData = {
                        clientGroupId: data[i].clientGroupId,
                        sopId: this.groupData.sopId
                    }
                    this.$request("/api/custGroup/updateGroup/1_0", payData, "POST").then((data) => {

                    })
                }
                this.groupData.relationId = clientGroupListId.trim();
                this.$request("/api/sop/updateSop/1_0", this.groupData, "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "操作成功 ！",
                            type: 'success'
                        });
                    }
                    this.editClientGroupVisible = false;
                    this.queryDataHandle()
                })
            },
            deleteHandle(row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this
                    this.$request("/api/sop/deleteSop/1_0?sopId=" + row.sopId, "", "GET").then((data) => {
                        if (data.data == 0) {
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.queryDataHandle(1, 10)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
        },
    }
</script>

<style scoped>

    img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .taskContent .el-card__body {
        padding: 0;
    }

    .taskContent .el-textarea .el-textarea__inner {
        min-height: 150px !important;
    }

    .button-center {
        text-align: center;
    }

    el-table-column {
        text-align: center;
    }
</style>
